<%@ Page Language="vb" AutoEventWireup="false" MasterPageFile="~/MasterPage.master" CodeFile="~/ClientAPI/Animation.aspx.vb" Inherits="Animation"%>
<asp:content id="header" contentplaceholderid="HeaderPlaceHolder" runat="Server">   
    <style>
        #divImageExplorer
        {
            padding-top: 30px;
            height: 150px;
        }
        #divImageExplorer img
        {
            float: left;
            height: 50px;
            width: 50px;
            cursor: pointer;
            position: relative;
        }
        
        #description
        {
            width: 200px;
	        border: #cccc33 1px outset;
	        font-size: 10pt;
	        color: black;
	        font-family: Tahoma, Verdana;
	        background-color: #ffffe0;
	        background-image: url(../images/instructionbg.gif);
	        padding: 10px;
	        position: absolute;
	        z-index: 100;
        }
    </style>

</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

	<div id="description" style="display: none;"></div>
	<div id="divImageExplorer">
	    <img id="dotnetnuke" src="../images/Dnnnuke96.gif" />
	    <img id="download" src="../images/Dnndownload128.gif" />
	    <img id="documents" src="../images/Dnndocument96.gif" />
	    <img id="menu" src="../images/Dnnmenu128.gif" />
	    <img id="labeledit" src="../images/Dnnlabeledit128.gif" />
	    <img id="tabstrip" src="../images/Dnntabstrip128.gif" />
	    <img id="textsuggest" src="../images/Dnntextsuggest128.gif" />
	    <img id="toolbar" src="../images/Dnntoolbar128.gif" />
	    <img id="treeview" src="../images/Dnntreeview128.gif" />
	</div>

	<p class="sampledescription">
	    This sample makes use of both the doTween and doAnimation methods.  The animations for mouseover and mouseout
	    utilize the doTween method</p>
<pre class="samplecode">dnn.dom.doTween(ctl.src + 'h', ctl, 'height', dnn.easing.easeOutExpo, ctl.offsetHeight, ctl.offsetHeight + 50, 1);
dnn.dom.doTween(ctl.src + 'w', ctl, 'width', dnn.easing.easeOutExpo, ctl.offsetWidth, ctl.offsetWidth + 50, 1);
dnn.dom.doTween(ctl.src + 'h', ctl, 'height', dnn.easing.easeOutBounce, ctl.offsetHeight, 50, 1);
dnn.dom.doTween(ctl.src + 'w', ctl, 'width', dnn.easing.easeOutBounce, ctl.offsetWidth, 50, 1);</pre>
	<p class="sampledescription">
        The label displayed when clicked use the doAnimation, which combines multiple tweens together to offer more effects.  In this case
        the Slide does both a crop and a setting of the width to give the appearance of the box sliding out from underneath the image.
    </p>
<pre class="samplecode">dnn.dom.animate(m_Description, dnn.motion.animationType.Slide, dnn.motion.animationDir.Right, 
    dnn.motion.easingType.Expo, dnn.motion.easingDir.easeInOut, 1, 1);</pre>        
	
			
</asp:Content>

